<template>
  <!-- <van-list
    v-model:loading="loading"
    :finished="finished"
    :offset="48"
    finished-text="没有更多了"
    @load="onLoad"
  > -->
  <PlanCom
    :remarks="remarks"
    :planList="planList"
    @handleChange="handleChange"
    @onSelect="onSelect"
    @doPlan="doPlan"
  />

  <van-overlay :show="showOverlay" class-name="loading_overlay">
    <van-loading class="loading" type="spinner" color="#1989fa" />
  </van-overlay>
  <!-- </van-list> -->
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import PlanCom from '@/components/plan.vue';
const router = useRouter();
import { getCurrentUserList } from '@/api/potInspectionPlan.js';
import { getCurrentMaintenanceList } from '@/api/maintenancePlan.js';

import { getFirstAndLastDayOfMonth } from '@/utils/common.js';
const { firstDay, lastDay } = getFirstAndLastDayOfMonth();
const planList = ref([]);
const showOverlay = ref(false);
const total = ref(0);
const searchData = reactive({
  startTime: firstDay || '',
  endTime: lastDay || '',
});
const remarks = ref({
  // '2021-1-13': 'some tings'
});

const loading = ref(false);
const finished = ref(false);
// const onLoad = () => {
//   setTimeout(async () => {
//     loading.value = true;
//     await getList();
//     searchData.pageNumber++;
//   }, 500);
// };

onMounted(() => {
  getList();
});
function getList() {
  showOverlay.value = true;
  getCurrentMaintenanceList(searchData)
    // getCurrentUserList(searchData)
    .then((res) => {
      planList.value = res.data || [];
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
}
function handleChange(data) {
  console.log('handleChange', data);
}

function doPlan(item) {
  //   if (data.state != 0) {
  //   emit('doPlan', data);
  // }
  router.push({
    name: 'inspectionTask',
    params: {
      type: 2,
      id: item.id,
      deviceId: item.deviceId,
    },
  });
}
function onSelect(date) {
  if (date) {
    total.value = 0;
    finished.value = false;
    planList.value = [];
    searchData.startTime = date.startTime;
    searchData.endTime =  date.endTime;
    getList();
  }
}
</script>

<style scoped lang="scss">
.pointInspection {
  padding: 32px 0 48px 0;
  width: 100%;

  .mpvue-calendar {
    width: 100%;
  }
}
</style>
